1import { List, ListStyle, Navigation, NavigationStack, Picker, Script, Section, Text, useMemo, useState } from "scripting"
2
3function Example() {
4 const [listStyle, setListStyle] = useState<ListStyle>("automatic")
5 const listStyleOptions = useMemo<ListStyle[]>(() => [
6 "automatic",
7 "bordered",
8 "carousel",
9 "elliptical",
10 "grouped",
11 "inset",
12 "insetGroup",
13 "plain",
14 "sidebar",
15 ], [])
16
17 return <NavigationStack>
18 <List
19 navigationTitle={"List Style"}
20 navigationBarTitleDisplayMode={"inline"}
21 listStyle={listStyle}
22 // listSectionSpacing={5} // apply for all sections
23 >
24 <Picker
25 title={"ListStyle"}
26 value={listStyle}
27 onChanged={setListStyle as any}
28 pickerStyle={"menu"}
29 >
30 {listStyleOptions.map(listStyle =>
31 <Text tag={listStyle}>{listStyle}</Text>
32 )}
33 </Picker>
34
35 <Section>
36 <Text
37 badge={10} // Use a badge to convey optional, supplementary information about a view
38 >Recents</Text>
39 <Text>Favorites</Text>
40 </Section>
41
42 <Section
43 header={<Text>Colors</Text>}
44 listItemTint={"systemBlue"}
45 >
46 <Text>Red</Text>
47 <Text>Blue</Text>
48 </Section>
49
50 <Section
51 header={<Text>Shapes</Text>}
52 >
53 <Text>Rectangle</Text>
54 <Text>Circle</Text>
55 </Section>
56
57 <Section
58 header={<Text>Borders</Text>}
59 listSectionSpacing={10} // specify on an individual Section
60 >
61 <Text>Dashed</Text>
62 <Text>Solid</Text>
63 </Section>
64 </List>
65 </NavigationStack>
66}
67
68async function run() {
69 await Navigation.present({
70 element: <Example />
71 })
72
73 Script.exit()
74}
75
76run()
